<template>
  <div class="cart-container">
    <div class="product-list-wrap">
      <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
        <div class="product-list">
          <ProductCell v-for="(prod) in cartProducts" :product="prod" :key="prod.id" @delete="onDelete"></ProductCell>
          <EmptyFlag v-if="!loading && !cartProducts.length">购物车是空的...</EmptyFlag>
          <van-loading style="margin-top: 10px;" v-if="loading && !refreshing && !cartProducts.length" color="#0094ff" vertical>加载中...</van-loading>
        </div>
      </van-pull-refresh>
    </div>
    <div class="cart-action" v-if="cartProducts.length">
      <div class="action-all-check">
        <van-checkbox :value="allChecked" @click="allCheckChange">全选</van-checkbox>
      </div>
      <div class="action-total">
        合计：<span class="cart-price"><small>￥</small>{{cartTotal}}</span>
      </div>
      <div class="action-order">
        <van-button class="vant-red-grd-btn action-order-btn" @click="cartOrder" round :loading="submitting" loading-text="结算">结算</van-button>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import { mapState } from 'vuex'
import { Checkbox, PullRefresh, List } from 'vant'
import _ from 'lodash'

import ProductCell from './components/ProductCell'
import EmptyFlag from '@/components/EmptyFlag'

Vue.use(Checkbox)
Vue.use(PullRefresh)
Vue.use(List)

export default {
  name: 'Cart',
  components: { ProductCell, EmptyFlag },
  data () {
    return {
      loading: false,
      submitting: false,
      refreshing: false
    }
  },
  computed: mapState({
    cart: state => state.cart.cart,
    allChecked () {
      const checked = this.cart.filter((product) => {
        return product.checked
      })

      return this.cart.length ? checked.length === this.cart.length : false
    },
    cartProducts (state) {
      return state.cart.cart.map((product) => {
        this.$set(product, 'checked', false)
        return product
      }) || []
    },
    cartTotal () {
      if (this.cartProducts && this.cartProducts.length) {
        return _.sumBy(this.cartProducts, (prod) => {
          if (prod.checked) {
            return prod.price * prod.count
          } else {
            return 0
          }
        })
      }
    }
  }),
  created () {
    this.fetchCartProducts()
  },
  methods: {
    async fetchCartProducts () {
      this.loading = true
      await this.$store.dispatch('fetchCart')
        .then(() => {
          this.refreshing = false
          this.loading = false
        })
        .catch((err) => {
          this.refreshing = false
          this.loading = false
          this.$toast(err.message)
        })
    },
    onRefresh () {
      this.fetchCartProducts()
    },
    async onDelete (product) {
      await this.$store.dispatch('removeFromCart', product.id)
        .catch((err) => {
          this.$toast(err.message)
        })
    },
    cartOrder () {
      const selectProduct = _.filter(this.cartProducts, (prod) => {
        return prod.checked
      })

      if (!selectProduct.length) {
        return
      }

      this.submitting = true

      this.$api.post('order/previewOrder.action', {
        data: {
          products: selectProduct
        }
      }).then(() => {
        this.submitting = false
        this.$router.push('/order/preview')
      }).catch((err) => {
        this.submitting = false
        this.$toast(err.message)
      })
    },
    allCheckChange () {
      this.cart.forEach((prod) => {
        prod.checked = !prod.checked
      })
    }
  }
}
</script>

<style lang="less">
  @headerHeight: 40px;
  @navHeight: 70px;

  .cart-container {

    .product-list-wrap {
      padding-top: 10px;
      padding-bottom: @navHeight + 10px;
    }

    .cart-action {
      position: fixed;
      bottom: 0;
      left: 0;
      z-index: 1000;
      width: 100%;
      height: @navHeight;
      display: flex;
      background: #fff;
      justify-content: space-between;
      align-items: center;
      padding: 10px;
    }

    .action-all-check {
      margin-right: 10px;
    }

    .action-total {
      flex: 1;
      color: red;
    }

    .action-order-btn {
      width: 100px;
    }
  }
</style>
